<template>
    <div class="condition-monitored">
        <!-- <div class="filter-container">
            <div class="filters">
              <span class="header-span">{{$t('openatc.devicemanager.area') }}：</span>
              <el-select
                style="width: 100px;"
                v-model="areas"
                @change="getAreas()"
                clearable
                filterable>
                <el-option
                  v-for="(item, index) in area"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filters">
              <span class="header-span">{{$t('openatc.devicemanager.route') }}：</span>
              <el-select
                style="width: 100px;"
                v-model="routes"
                @change="getRoute()"
                clearable
                filterable>
                <el-option
                  v-for="(item, index) in route"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
        </div> -->
        <el-table
          ref="multipleTable"
          :data="tableDatas"
          size="mini"
          :max-height="tableHeight"
          v-loading.body="listLoading"
          style="width: 100%"
          id="footerBtn">
          <el-table-column
            type="index"
            align="center">
          </el-table-column>
          <el-table-column
            prop="agentid"
            :label="$t('openatc.devicemanager.crossid')"
            :sort-method="sortAgentId"
            sortable
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            :label="$t('openatc.devicemanager.devicename')"
            align="center">
          </el-table-column>
          <el-table-column
            :label="$t('openatc.devicemanager.cycle')"
            align="center">
            <template slot-scope="scope">
                {{scope.row.pattern ? scope.row.pattern.cycle : ''}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('openatc.devicemanager.offset')"
            align="center">
            <template slot-scope="scope">
                {{scope.row.pattern ? scope.row.pattern.offset : ''}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('openatc.devicemanager.pattern')"
            width="800px"
            align="center">
            <template slot-scope="scope">
            <pattern-list
            v-show="scope.row.state==='UP'"
            :cycle="scope.row.pattern ? scope.row.pattern.cycle : 0"
            :syncTime="scope.row.pattern ? scope.row.pattern.syncTime : 0"
            :controlData="scope.row.pattern?scope.row.pattern:{}"
            :showCondition="true"
            :localPatternList="[]"
            :phaseList="scope.row.phaseList?scope.row.phaseList:[]"
            >
            </pattern-list>
            </template>
          </el-table-column>
          <el-table-column :label="$t('openatc.devicemanager.status')" align="center" width="240">
            <template slot-scope="scope">
              <el-button type="text">{{getTag(scope.row).label}}</el-button>
              <el-button type="text">{{scope.row.state === 'DOWN'?'--':getType(scope.row).label}}</el-button>
              <el-button type="text">{{scope.row.state === 'DOWN'?'--':getMode(scope.row).label}}</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getMessageByCode } from '../../utils/responseMessage'
import { getTscControl } from '../../api/control'
// import { uploadSingleTscParam } from '../../api/param'
export default {
  data () {
    return {
      listLoading: false, // 数据加载等待动画
      crossList: [],
      timer: null,
      tableDatas: []
      // areas: '',
      // area: [
      //   {
      //     label: this.$t('openatc.devicemanager.offline'),
      //     value: 'DOWN'
      //   },
      //   {
      //     label: this.$t('openatc.devicemanager.online'),
      //     value: 'UP'
      //   }
      // ],
      // route: [
      //   {
      //     label: this.$t('openatc.devicemanager.offline'),
      //     value: 'DOWN'
      //   },
      //   {
      //     label: this.$t('openatc.devicemanager.online'),
      //     value: 'UP'
      //   }
      // ],
      // routes: '',
      // allPhaseList: []
    }
  },
  props: {
    allPhaseList: {
      type: Array
    },
    tableHeight: {
      type: Number,
      default: 900
    },
    tableData: {
      type: Array
    }
  },
  watch: {
    tableData: {
      handler: function () {
        this.tableDatas = this.tableData
      },
      deep: true
    }
  },
  created () {
    // for (let i = 0; i < this.tableData.length; i++) {
    //   if (this.tableData[i].state === 'UP') {
    //     this.getPhase(this.tableData[i].agentid)
    //   }
    // }
    this.getChart()
    this.timer = setInterval(() => {
      this.getChart()
    }, 1000)
  },
  methods: {
    getChart () {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].state === 'UP') {
          // this.getPhase(this.tableData[i].agentid)
          // setTimeout(() => {
          this.initData(this.tableData[i].agentid, i)
          // }, 100)
        } else {
          this.tableDatas = this.tableData
        }
      }
    },
    // getPhase (id) {
    //   let type = 'phase'
    //   this.allPhaseList = []
    //   uploadSingleTscParam(type, id).then(data => {
    //     let res = data.data
    //     if (!res.success) {
    //       let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
    //       if (data.data.data) {
    //         // 子类型错误
    //         let childErrorCode = data.data.data.errorCode
    //         if (childErrorCode) {
    //           let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
    //           this.$message.error(parrenterror + ',' + childerror)
    //         }
    //       } else {
    //         this.$message.error(parrenterror)
    //       }
    //       return
    //     }
    //     let obj = {
    //       agentid: id,
    //       phaseList: JSON.parse(JSON.stringify(res.data.data.phaseList))
    //     }
    //     this.allPhaseList.push(obj)
    //   })
    // },
    sortAgentId (obj1, obj2) {
      let val1 = obj1.agentid
      let val2 = obj2.agentid
      return val1 - val2
    },
    initData (id, index) {
      this.crossList = []
      getTscControl(id).then((data) => {
        if (!data.data.success) {
          let agentid = data.data.data.agentid
          let commomMsg = this.$t('openatc.greenwaveoptimize.device') + agentid
          let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
          if (data.data.data) {
            // 子类型错误
            let childErrorCode = data.data.data.errorCode
            if (childErrorCode) {
              let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
              this.$message.error(parrenterror + ',' + childerror + ',' + commomMsg)
            }
          } else {
            this.$message.error(parrenterror + ',' + commomMsg)
          }
        }
        let obj = {
          agentid: id,
          conditionData: JSON.parse(JSON.stringify(data.data.data.data))
        }
        this.crossList.push(obj)
        let find = this.crossList.filter(x => x.agentid === id)[0]
        let finds = this.allPhaseList.filter(x => x.agentid === id)[0]
        this.$set(this.tableData[index], 'phaseList', finds ? finds.phaseList : [])
        this.$set(this.tableData[index], 'pattern', find ? find.conditionData : {})
      }).catch(error => {
        console.log(error)
      })
    },
    getTag (row) {
      if (row.state === 'DOWN') {
        return {
          label: this.$t('openatc.devicemanager.offline'),
          type: 'info'
        }
      } else {
        if (row.status === 0) {
          // 数据从设备端来，暂时写死，0代表正常状态，其余数字均代表一种类型的故障
          return {
            label: this.$t('openatc.devicemanager.online'),
            type: 'success'
          }
        } else {
          // return {
          //   label: this.$t('openatc.devicemanager.fault'),
          //   type: 'danger'
          // }
        }
      }
    },
    getMode (row) {
      if (row.control === 0) {
        return {
          label: this.$t('openatccomponents.overview.modelList0'),
          type: 'success'
        }
      } else if (row.control === 1) {
        return {
          label: this.$t('openatccomponents.overview.modelList1'),
          type: 'warning'
        }
      } else if (row.control === 2) {
        return {
          label: this.$t('openatccomponents.overview.modelList2'),
          type: 'warning'
        }
      } else if (row.control === 3) {
        return {
          label: this.$t('openatccomponents.overview.modelList3'),
          type: 'warning'
        }
      } else if (row.control === 4) {
        return {
          label: this.$t('openatccomponents.overview.modelList4'),
          type: 'warning'
        }
      } else if (row.control === 22) {
        return {
          label: this.$t('openatccomponents.overview.modelList22'),
          type: 'warning'
        }
      } else if (row.control === 5) {
        return {
          label: this.$t('openatccomponents.overview.modelList5'),
          type: 'success'
        }
      } else if (row.control === 6) {
        return {
          label: this.$t('openatccomponents.overview.modelList6'),
          type: 'success'
        }
      } else if (row.control === 7) {
        return {
          label: this.$t('openatccomponents.overview.modelList7'),
          type: 'success'
        }
      } else if (row.control === 8) {
        return {
          label: this.$t('openatccomponents.overview.modelList8'),
          type: 'success'
        }
      } else if (row.control === 9) {
        return {
          label: this.$t('openatccomponents.overview.modelList9'),
          type: 'success'
        }
      } else if (row.control === 10) {
        return {
          label: this.$t('openatccomponents.overview.modelList10'),
          type: 'success'
        }
      } else if (row.control === 11) {
        return {
          label: this.$t('openatccomponents.overview.modelList11'),
          type: 'success'
        }
      } else if (row.control === 12) {
        return {
          label: this.$t('openatccomponents.overview.modelList12'),
          type: 'success'
        }
      } else if (row.control === 13) {
        return {
          label: this.$t('openatccomponents.overview.modelList13'),
          type: 'success'
        }
      } else if (row.control === 14) {
        return {
          label: this.$t('openatccomponents.overview.modelList14'),
          type: 'success'
        }
      } else if (row.control === 15) {
        return {
          label: this.$t('openatccomponents.overview.modelList15'),
          type: 'success'
        }
      } else if (row.control === 16) {
        return {
          label: this.$t('openatccomponents.overview.modelList16'),
          type: 'success'
        }
      } else if (row.control === 17) {
        return {
          label: this.$t('openatccomponents.overview.modelList17'),
          type: 'success'
        }
      } else if (row.control === 18) {
        return {
          label: this.$t('openatccomponents.overview.modelList18'),
          type: 'success'
        }
      } else if (row.control === 19) {
        return {
          label: this.$t('openatccomponents.overview.modelList19'),
          type: 'success'
        }
      } else if (row.control === 21) {
        return {
          label: this.$t('openatccomponents.overview.modelList21'),
          type: 'success'
        }
      } else if (row.control === 23) {
        return {
          label: this.$t('openatccomponents.overview.modelList23'),
          type: 'success'
        }
      } else if (row.control === 24) {
        return {
          label: this.$t('openatccomponents.overview.modelList24'),
          type: 'success'
        }
      } else if (row.control === 99) {
        return {
          label: this.$t('openatccomponents.overview.modelList25'),
          type: 'success'
        }
      } else if (row.control === 100) {
        return {
          label: this.$t('openatccomponents.overview.modelList100'),
          type: 'success'
        }
      } else if (!row.control) {
        return {
          label: '',
          type: ''
        }
      }
    },
    getType (row) {
      if (row.mode === 0) {
        return {
          label: this.$t('openatc.patternstatistic.mode0'),
          type: 'success'
        }
      } else if (row.mode === 1) {
        return {
          label: this.$t('openatc.patternstatistic.mode1'),
          type: 'warning'
        }
      } else if (row.mode === 2) {
        return {
          label: this.$t('openatc.patternstatistic.mode2'),
          type: 'warning'
        }
      } else if (row.mode === 3) {
        return {
          label: this.$t('openatc.patternstatistic.mode3'),
          type: 'warning'
        }
      } else if (row.mode === 4) {
        return {
          label: this.$t('openatc.patternstatistic.mode4'),
          type: 'warning'
        }
      } else if (row.mode === 5) {
        return {
          label: this.$t('openatc.patternstatistic.mode5'),
          type: 'warning'
        }
      } else if (row.mode === 6) {
        return {
          label: this.$t('openatc.patternstatistic.mode6'),
          type: 'warning'
        }
      } else if (row.mode === 7) {
        return {
          label: this.$t('openatc.patternstatistic.mode7'),
          type: 'warning'
        }
      } else if (row.mode === 8) {
        return {
          label: this.$t('openatc.patternstatistic.mode8'),
          type: 'warning'
        }
      } else if (!row.mode) {
        return {
          label: '',
          type: ''
        }
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style>

</style>
